<script setup>
import { Check } from '@element-plus/icons-vue'
defineProps({
  label: String,
  selected: Boolean,
})
const emits = defineEmits(['select'])

function handleClick() {
  emits('select')
}
</script>

<template>
  <div
    class="ring-media-focus relative flex w-full cursor-pointer select-none items-center justify-start rounded-sm p-2.5 outline-none hover:bg-white/10 data-[focus]:ring-[3px]"
    @click="handleClick"
  >
    <div class="text-media-brand text-primary w-4 h-4">
      <span :class="selected ? '' : 'hidden'">
        <el-icon> <Check /> </el-icon>
      </span>
    </div>
    <span class="ml-2" data-part="label">{{ label }}</span>
  </div>
</template>
